import React from "react";
import { Swiper, Grid } from "react-vant";
import { useNavigate } from "react-router-dom";
import "./index.css";
import grid1 from "../../assets/mi.png";
import grid2 from "../../assets/mi2.png";
import grid3 from "../../assets/mi3.png";
import grid4 from "../../assets/mi4.png";
import grid5 from "../../assets/mi.png";

const Index: React.FC = () => {
  const navigate = useNavigate();
  const tozhifa = () => {
    navigate("/zhifa");
  };
  const tozhifang = () => {
    navigate("/zhifang");
  };
  return (
    <div className="sweiper-grid">
      <Swiper className="sweiper-grid-swiper" autoplay={5000}>
        <Swiper.Item style={{ height: "100%" }}>
          <Grid
            style={{ height: "100%", width: "100%" }}
            border={false}
            columnNum={5}
          >
            <Grid.Item style={{ width: "20%" }} onClick={tozhifa}>
              <img style={{width:"50px",height:"50px",borderRadius:"50%"}} src={grid2} alt="" />
              <p>止脱生发</p>
            </Grid.Item>
            <Grid.Item style={{ width: "20%" }}>
              <img style={{width:"50px",height:"50px",borderRadius:"50%"}} src={grid1} alt="" />
              <p>延时持久</p>
            </Grid.Item>

            <Grid.Item style={{ width: "20%" }}>
              <img style={{width:"50px",height:"50px",borderRadius:"50%"}} src={grid3} alt="" />
              <p>妇科炎症</p>
            </Grid.Item>
            <Grid.Item style={{ width: "20%" }}>
              <img style={{width:"50px",height:"50px",borderRadius:"50%"}} src={grid4} alt="" />
              <p>平稳降压</p>
            </Grid.Item>
            <Grid.Item style={{ width: "20%" }}>
              <img style={{width:"50px",height:"50px",borderRadius:"50%"}} src={grid5} alt="" />
              <p>稳控血糖</p>
            </Grid.Item>
            <Grid.Item style={{ width: "20%" }}>
              <img style={{width:"50px",height:"50px",borderRadius:"50%"}} src={grid1} alt="" />
              <p>领券中心</p>
            </Grid.Item>
            <Grid.Item style={{ width: "20%" }}>
              <img style={{width:"50px",height:"50px",borderRadius:"50%"}} src={grid2} alt="" />
              <p>快速降脂</p>
            </Grid.Item>
            <Grid.Item style={{ width: "20%" }}>
              <img style={{width:"50px",height:"50px",borderRadius:"50%"}} src={grid3} alt="" />
              <p>缓解风湿</p>
            </Grid.Item>
            <Grid.Item style={{ width: "20%" }}>
              <img style={{width:"50px",height:"50px",borderRadius:"50%"}} src={grid4} alt="" />
              <p>远离哮喘</p>
            </Grid.Item>
            <Grid.Item style={{ width: "20%" }}>
              <img style={{width:"50px",height:"50px",borderRadius:"50%"}} src={grid5} alt="" />
              <p>全部分类</p>
            </Grid.Item>
          </Grid>
        </Swiper.Item>
        <Swiper.Item style={{ height: "100%" }}>
          <Grid
            style={{ height: "100%", width: "100%" }}
            border={false}
            columnNum={5}
          >
            <Grid.Item style={{ width: "20%" }} onClick={tozhifang}>
              <img style={{width:"50px",height:"50px",borderRadius:"50%"}} src={grid2} alt="" />
              <p>快速降脂</p>
            </Grid.Item>
            <Grid.Item style={{ width: "20%" }}>
              <img style={{width:"50px",height:"50px",borderRadius:"50%"}} src={grid1} alt="" />
              <p>延时持久</p>
            </Grid.Item>
            <Grid.Item style={{ width: "20%" }}>
              <img style={{width:"50px",height:"50px",borderRadius:"50%"}} src={grid2} alt="" />
              <p>止脱生发</p>
            </Grid.Item>
            <Grid.Item style={{ width: "20%" }}>
              <img style={{width:"50px",height:"50px",borderRadius:"50%"}} src={grid3} alt="" />
              <p>妇科炎症</p>
            </Grid.Item>
            <Grid.Item style={{ width: "20%" }}>
              <img style={{width:"50px",height:"50px",borderRadius:"50%"}} src={grid4} alt="" />
              <p>平稳降压</p>
            </Grid.Item>
            <Grid.Item style={{ width: "20%" }}>
              <img style={{width:"50px",height:"50px",borderRadius:"50%"}} src={grid5} alt="" />
              <p>稳控血糖</p>
            </Grid.Item>
            <Grid.Item style={{ width: "20%" }}>
              <img style={{width:"50px",height:"50px",borderRadius:"50%"}} src={grid1} alt="" />
              <p>领券中心</p>
            </Grid.Item>

            <Grid.Item style={{ width: "20%" }}>
              <img style={{width:"50px",height:"50px",borderRadius:"50%"}} src={grid3} alt="" />
              <p>缓解风湿</p>
            </Grid.Item>
            <Grid.Item style={{ width: "20%" }}>
              <img style={{width:"50px",height:"50px",borderRadius:"50%"}} src={grid4} alt="" />
              <p>远离哮喘</p>
            </Grid.Item>
            <Grid.Item style={{ width: "20%" }}>
              <img style={{width:"50px",height:"50px",borderRadius:"50%"}} src={grid5} alt="" />
              <p>全部分类</p>
            </Grid.Item>
          </Grid>
        </Swiper.Item>
      </Swiper>
    </div>
  );
};

export default Index;
